<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>


    <link rel="stylesheet" href="css/style.css"/>

    <script>
        $(function(){

            //这里进行表单验证， 标示当点击登陆按钮时，执行
            $("#subbtn").click(function(){

                var flag = true;

                $("#err_username").html(''); //清空用户名的错误信息
                $("#err_userpasswd").html(''); //清空密码的错误信息

                var username = $("input[name='username']").val();
                var userpasswd = $("input[name='userpasswd']").val();

                //验证数据是否为空
                if (username == '') {
                    $("#err_username").html('提示：用户名不能为空！');
//                    $("input[name='username']").focus();
                    flag = false;
                }

                if (userpasswd == '') {
                    $("#err_userpasswd").html('提示：密码不能为空！');
                    //$("input[name='userpasswd']").focus();
                    flag = false;
                }

                if (flag) {
                    //数据都不为空，提交数据

                    $.post('checkLogin.php', {username:username, userpasswd:userpasswd}, function (data) {
                        if (data.code == 200){
                            window.location.href = 'index.html';
                            return;
                        } else if(data.code == 501) {
                            $("#err_username").html(data.message); //data.code  data['code']
                            return;
                        } else if(data.code == 502) {
                            $("#err_userpasswd").html(data.message);
                            return;
                        }

                    }, 'json');

                }


            });

        });

//        $(document).ready(function(){
//
//        });

    </script>
    <title>登录</title>
    <style>
        #login{
            width: 800px;
            height: auto;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 100px;
        }
        input.in{
            width: 280px;
            height: 25px;
            padding: 2px 10px;
            border: 1px solid #d2d2d2;
        }
        a.subbtn{
            color: #333;
            text-decoration: none;
            border: 1px solid #e2e2e2;
            width: 120px;
            height: 26px;
            line-height: 26px;
            overflow: hidden;
            display: block;
            text-align: center;
        }
        label.error{
            font-size: 12px;
            color: #f00;
        }
    </style>
</head>
<body>
<div id="header">
    <h1>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp登录界面</h1>

</div>


<?php

//if ($_GET['act'] == "loging") {
//    //表单数据提交， 接收 处理表单数据
//
//    echo $_POST['username'] . $_POST['userpasswd'] . '<br>';
//
//}

?>

<div class="rj_content">
    <div id="login">

        <form name="login" id="login">

            <div class="shiguang animated bounceIn">
                <div class="left sg_ico">
                    <img src="images/my_1.jpg" width="120" height="120" alt=""/>
                </div>
                <div class="right sg_text">
                    <img src="images/left.png" width="13" height="16" alt="左图标"/>
                    <div>


            <p>
                用户名：<input type="text" name="username" id="username" class="in">
                <label class="error" id="err_username"></label>
            </p>

            <p>
                密&nbsp&nbsp&nbsp码：<input type="password" name="userpasswd" id="userpasswd" class="in">
                <label class="error" id="err_userpasswd"></label>
            </p>

<!--            <button>登陆</button>-->
<!--            <input type="submit"> <button></button>-->
            <a href="javascript:void(0);" class="subbtn" id="subbtn">登录</a>


        </form>

    </div>




</body>
</html>